import React, { Component } from 'react'
import './Slider.css';//这里的后缀不能省略

export default class Slider extends Component {
  //声明状态
  state = {
    id: 1
  }

  render() {
    return (
      <div className="slider-container">
        <img width="100%" src={`/images/`+ this.state.id + `.jpg`} alt="" />
        <div className="left" onClick={this.prev}>&lt;</div>
        <div className="right" onClick={this.next}>&gt;</div>
      </div>
    )
  }
  //声明方法 点击切换上一张
  prev = () => {
    //获取 id
    let {id} = this.state;

    //判断
    if(id <= 1){
      id = 5;
    }else{
      id -= 1;
    }

    //修改状态
    this.setState({
      id
    })

  }

  //声明方法 点击下一个的回调
  next = () => {
    //获取 id
    let {id} = this.state;
    //判断
    if(id > 4){
      id = 1;
    }else{
      id += 1;
    }

    this.setState({
      id
    })
  }
}
